<template>
  <div>

    <div style="margin-top: 14%">

      <div>
        <van-cell-group inset>
<!--          <van-uploader-->
<!--              v-model="fileList"-->
<!--              multiple-->
<!--              :max-count="1"-->
<!--              :after-read="afterRead"-->
<!--              preview-size="150px"-->
<!--              class="uploader"-->
<!--              ref="file"-->
<!--          />-->
<!--          <div>上传头像</div>-->
          <van-field type="name" v-model="user.name" label="账号：" placeholder="账号" @change="checkName()"/>
          <van-field type="password" v-model="user.password" label="密码：" placeholder="密码"/>
          <van-field type="phone" v-model="user.phone" label="手机号：" placeholder="手机号" @change="checkPhone()"/>

          <div style="margin: 16px;">
            <van-button round block type="success" :disabled="btn2" @click="save()">
              注册账号
            </van-button>
          </div>
        </van-cell-group>
      </div>

    </div>
    <div>
      <van-row>
        <van-col span="6">
        </van-col>
        <van-col span="12"></van-col>
        <van-col span="6">
          <router-link to="/">登录账号</router-link>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>

export default {
  name: "ResterView",
  data() {
    return {
      btn2: true,
      fileList: [],//默认是一个空数组
      imageData: {},
      isShow: false,
      showList: false,
      user: {// 账号密码 验证码 手机号
        name: "",
        password: "",
        phone: ""
      }

    }
  },setup() {
    const afterRead = (file) => {
      // 此时可以自行将文件上传至服务器
      //console.log(file);
    };

    return {
      afterRead,
    };
  },


  methods: {
    checkName() {
      //校验手机号是否存在
      this.axios.get("api/user/checkName.do?name=" + this.user.name).then((r) => {
        if (r.data.code == 200) {

        } else {
          this.$toast("账号已存在，修改")
          //账号存在  不让注册
          this.btn2 = true;
        }

      })
    },
    // afterRead(file) {
    //   // 此时可以自行将文件上传至服务器
    //   console.log(file);
    //
    //   //在这块创建FormData对象
    //   // FormData 对象的使用：
    //   // 1.用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString
    //   // 2. 异步上传二进制文件。
    //   //上传图片需要转换二进制这里要用到FormData
    //   // const forms = new FormData();
    //   // //这里的file表示给后台传的属性名字，这里看接口文档需要传的的属性
    //   // forms.append("file", file.file); // 获取上传图片信息
    //   var formData = new FormData();
    //   formData.append("file", file.file);
    //   formData.append("user",JSON.stringify(this.user));
    //   //向后端发送相应的请求
    //   //这块的url是具体的交互接口
    //   //headers是上传图片需要用到的响应头，此处的token是后端那边给设置的，所以我请求的时候需要带上token，
    //   //token根据实际情况自行添加
    // },
    checkPhone() {
      //校验手机号是否存在
      this.axios.get("api/user/checkphone.do?phone=" + this.user.phone).then((r) => {
        if (r.data.code == 200) {
          //存在  可以发送验证码
          this.$toast("该手机号已注册");
          this.btn2 = true;
        } else {
          this.btn2 = false;

        }
      })
    },
    save() {
      this.axios.post("api/user/save.do", this.user).then((r) => {
            if (r.data.code == 200) {
              this.$toast("注册成功")
              this.$router.push("/")
            } else {
              this.$toast("注册失败")
            }

          }
      )
    }

  }
}
</script>

<style scoped>
.preview-cover {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}
</style>
